@charset 'UTF-8';

@function vw($px){
  @return $px / 10.8 + vw
}
.face-box{
  min-height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
  color: #999;
  font-size: vw(42);
  text-align: center;
  padding: vw(430) 0 0;
  .discern-box{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    width: vw(640);
    height: vw(640);
    margin: 0 auto 0;
    background-image: url("../../assets/images/discern-box.png");
    background-size: 100% 100%;
    img{
      width: vw(430);
    }
    div{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      border-top: vw(6) solid #f4942e;
      animation:mymove 5s infinite alternate;
      background: linear-gradient(rgba(224,148,68,.4), rgba(224,148,68,.04));
    }
  }
}
@keyframes mymove {
  from {height: 100%;}
  to {height: 0;}
}
